<!DOCTYPE html>
<html style="height: 90%; width: 100%" xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<!-- layui -->
	<link type="text/css" rel="stylesheet" th:href="@{/plug/layui/css/layui.css}"  media="all"/>
	<script type="text/javascript" th:src="@{/plug/layui/layui.js}"  charset="utf-8"></script>
</head>
<body style="height: 90%;width: 100%; margin: 0">
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
<script type="text/javascript" th:src="@{/js/echarts/echarts.js}"></script>
<script type="text/javascript" th:src="@{/js/echarts/china.js}"></script>
<div id="container" style="height: 90%;width: 100%"></div>
</body>
</html>

<script type="text/javascript" th:inline="javascript">
	var t1 = [[${t1}]];
	var t2 = [[${t2}]];
	var t3 = [[${t3}]];
	var t4 = [[${t4}]];
	$(function() {
		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		option = {
			title: {
				text: '全国投放各分类统计',
				subtext: '全国投放所有垃圾各种类型统计',
				left: 'center'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			legend: {
				orient: 'vertical',
				left: 'left',
				data: ['可回收', '干垃圾', '湿垃圾', '有害垃圾']
			},
			series: [
				{
					name: '分类',
					type: 'pie',
					radius: '55%',
					center: ['50%', '60%'],
					data: [
						{value: t1, name: '可回收'},
						{value: t2, name: '干垃圾'},
						{value: t3, name: '湿垃圾'},
						{value: t4, name: '有害垃圾'}
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};

		if (option && typeof option === "object") {
			myChart.setOption(option, true);
		}
	});
</script>